<template>
  <el-container>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :params="params"
        row-key="id"
        stripe
      >
        <el-table-column
          label="产品名称"
          prop="name"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="规格型号"
          prop="specification"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="材质"
          prop="vproductMaterial"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="备注"
          prop="vproductRemark"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="合同数量"
          prop="num"
          width="100"
          v-if="source == 0"
        ></el-table-column>
        <el-table-column
          label="退货重做数量"
          prop="num"
          width="100"
          v-if="source == 1"
        ></el-table-column>
        <el-table-column
          label="已生产数量"
          prop="produceNum"
          width="100"
        ></el-table-column>
        <el-table-column
          label="发货数量"
          prop="deliverNum"
          width="100"
          v-if="source == 1"
        ></el-table-column>
        <el-table-column label="产品状态" prop="status" width="100">
          <template #default="scope">
            <p v-if="scope.row.produceStatus == 0">未生产</p>
            <p v-if="scope.row.produceStatus == 1" style="color: green">
              生产中
            </p>
            <p v-if="scope.row.produceStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="生产设备"
          prop="equipmentCode"
          width="250"
        ></el-table-column>
        <el-table-column label="是否外发" prop="isOut" width="100">
          <template #default="scope">
            <p>{{ scope.row.isOut == 0 ? "否" : "是" }}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排产状态" prop="schedulingStatus" width="200">
          <template #default="scope">
            <p v-if="scope.row.schedulingStatus == 0">未排产</p>
            <p v-if="scope.row.schedulingStatus == 1" style="color: green">
              部分排产
            </p>
            <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template #default="scope">
            <el-button-group>
              <el-button
                v-if="scope.row.produceStatus != 0"
                text
                type="primary"
                size="small"
                @click="productionInfo(scope.row)"
                >排产信息</el-button
              >
              <!-- <el-button
                v-if="scope.row.produceStatus === 0"
                text
                type="primary"
                size="small"
                @click="start(scope.row)"
                v-auth-button="['start/produceOrderManagement']"
                >开始生产</el-button
              > 
             <el-button
                text
                type="primary"
                size="small"
                @click="compelet(scope.row, scope.$index)"
                v-if="scope.row.produceStatus != 2"
                v-auth-button="['compelet/produceOrderManagement']"
                >录入数据</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="compelet(scope.row, scope.$index)"
                v-if="scope.row.produceStatus > 0"
                v-auth-button="['send/produceOrderManagement']"
                >发货</el-button
              >  -->
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <!--录入数据-->
  <sc-dialog
    v-model="visible"
    :title="title"
    @closed="$emit('closed')"
    destroy-on-close
  >
    <el-form
      :model="produceForm"
      :rules="rules"
      ref="addProduceForm"
      label-width="auto"
      label-position="right"
    >
      <el-form-item label="生产数量" prop="num">
        <el-input-number
          v-model="produceForm.num"
          :min="0"
          autocomplete="off"
        ></el-input-number>
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item
        label="附件"
        v-if="produceForm.num > produceForm.contractNum"
        style="margin-top: 15px"
      >
        <sc-upload-file
          v-model="produceForm.otherFileList"
          :limit="10"
          :multiple="false"
          tip="最多上传10个文件,单个文件不要超过20M"
        >
          <el-button type="primary" plain icon="el-icon-upload"
            >上传附件</el-button
          >
        </sc-upload-file>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="submmit()">确 定</el-button>
    </template>
  </sc-dialog>
</template>

<script>

export default {
  props: {
    id: {
      type: String
    },
    source: {
      type: Number
    }
  },

  data () {
    return {
      params: {
        produceId: this.id,
      },
      apiObj: this.$API.produce.produceProducts.selectProductsByProduceId,
      visible: false,
      produceForm: {
        id: "",
        num: 0,
        contractNum: '',
        otherFileList: [],//附件
      },
      title: "",
      rules: {
        num: [
          { required: true, message: '请输入生产数量' }
        ],
      }
    }
  },
  mounted () { },
  methods: {
    // 列表信息
    async selectProduceProducts (produceId) {
      var data = {
        produceId: produceId,
        page: 1,
        limit: 20,
      }
      var info = await this.$API.produce.products.getProductsList.get(data)
      this.produceList = info.data
    },
    cancel () {
      this.produceForm.num = 0
      this.produceForm.id = ''
      this.produceForm.contractNum = ''
      this.visible = false
    },
    start (row) {
      var data = {
        id: row.id,
        status: 1,
      }
      this.requestApiStatus(data)
    },

    submmit () {
      this.$refs.addProduceForm.validate(async (valid) => {
        if (valid) {
          let fileType = ''
          this.produceForm.otherFileList.map(item => {
            if (item.url) {
              let arr = item.url.split('.')
              let type = arr[arr.length - 1]
              // fileType  1图片 2文件
              let imageType = 'jpg/png/jpeg/svg'
              if (imageType.includes(type)) {
                fileType = 1
              } else {
                fileType = 2
              }
              item.fileType = fileType
              item.fileName = item.name
            }
          })
          var result = await this.$API.produce.products.enterProductNum.post(this.produceForm)
          if (result.code == 200) {
            this.$refs.table.refresh()
            this.cancel()
            this.$emit('updatePage')
            this.$message.success("操作成功")
          } else {
            this.$alert(result.message, "提示", { type: 'error' })
          }
        }
      })
    },
    //录入生产数据
    compelet (row) {
      this.produceForm.id = row.id
      this.produceForm.contractNum = row.num - row.produceNum
      this.title = "【" + row.name + "】" + "生产数据"
      this.visible = true
      // var data = {
      //   id: row.id,
      //   status: 2
      // }
      // this.requestApiStatus(data)
    },
    async requestApiStatus (data) {
      var info = await this.$API.produce.products.updateProductsStatus.post(data)
      if (info.code === 200) {
        this.$message.success("操作成功")
        this.selectProduceProducts(this.id)
        this.$refs.table.refresh()
        this.$emit('updatePage')
        // this.rowData.type = data.status
      } else {
        this.$message.error(info.message)
      }
    },

    //本地更新数据
    handleSaveSuccess () {
      this.$refs.table.refresh()
    },
  }
};
</script>
<style></style>
